<template>
  <el-table :data="resultList" stripe height="50%">
    <el-table-column label="执行记录">
      <template #default="{ row }"> #{{ row.buildOrder }} </template>
    </el-table-column>
    <el-table-column label="开始时间" prop="executeTime" />
    <el-table-column label="结束时间" prop="finishTime" />
    <el-table-column label="用例执行比例">
      <template #default="{ row }">
        <el-tag :type="row.tagType" size="default" effect="plain"
          >{{ row.passCount }} / {{ row.caseCount }}</el-tag
        >
      </template>
    </el-table-column>
    <el-table-column label="用例通过率">
      <template #default="{ row }">
        <el-tag :type="row.tagType" size="default" effect="light"
          >{{ row.passRate.toFixed(2) }} %</el-tag
        >
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-button
          type="danger"
          :icon="Delete"
          size="default"
          @click="deleteResult(row)"
        ></el-button>
        <el-button
          type="primary"
          :icon="Download"
          size="default"
          @click="downloadResult(row)"
        ></el-button>
        <el-button
          type="success"
          :icon="View"
          size="default"
          @click="viewReport(row)"
        ></el-button>
      </template>
    </el-table-column>
  </el-table>

  <result-bar-chart
    height="50%"
    :key="resultList.length"
    :chartData="resultList"
  ></result-bar-chart>
</template>

<script setup lang="ts">
import { listResultInProjectApi, deleteResultApi } from "@/api/sunnyresult";
import { useProjectStore } from "@/stores/sunnyProjectStore";
import type { SunnyResult, SunnyResultVO } from "@/types/sunnyResult/type";
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { onBeforeRouteUpdate, useRouter } from "vue-router";
import { Delete, View, Download } from "@element-plus/icons-vue";
import ResultBarChart from "@/views/result/ResultBarChart.vue";

const projectStore = useProjectStore();
const resultList = ref<SunnyResultVO[]>([]);
const router = useRouter();

onMounted(() => {
  listResultList();
});

onBeforeRouteUpdate(() => {
  listResultList();
});

function listResultList() {
  listResultInProjectApi(projectStore.selectedProject.id).then(({ data }) => {
    resultList.value.length = 0;
    data.forEach((result) => {
      //清空数组
      let status = "Fail";
      let passRate = 0;
      let tagType = "danger";
      passRate = (result.passCount / result.caseCount) * 100;
      //判断一下通过情况，如果全部是通过，则本次运行结果为通过
      if (passRate === 100) {
        status = "Pass";
        tagType = "success";
      } else {
        //如果全是跳过，则运行结果为跳过
        if (result.caseCount === result.skippedCount) {
          status = "Skipped";
          tagType = "warning";
        } else {
          //否则，全部视为失败
          status = "Fail";
          tagType = "danger";
        }
      }
      //解构赋值
      resultList.value.push({ ...result, status, tagType, passRate });
    });
  });
}

function deleteResult(row: SunnyResult) {
  deleteResultApi(row.id).then(() => {
    ElMessage.success("已删除运行记录");
    listResultList();
  });
}

function viewReport(row: SunnyResult) {
  router.push({
    name: "report",
    params: { resultId: row.id },
    query: { projectId: row.projectId, buildOrder: row.buildOrder },
  });
}

function downloadResult(row: SunnyResult) {
  //通过访问网页来完成下载,注意通过代理来完成访问
  window.open(`/sunny/sunnyResult/${row.id}/download`);
}
</script>

<style scoped>
.el-table :deep(.el-table__inner-wrapper) {
  height: 100% !important;
}
</style>
